<template>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :pager-count="7"
            :page-sizes="[10, 20, 30, 40, 50, 60]" :small="small" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="list.length"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue'

const props = defineProps({
    list: { 
        type: Object,
        default: []
    }
})

const { list } = toRefs(props)

watch(() => list.value, () => {
    handleData()
})

const emits = defineEmits(['getTableList'])

// 分页逻辑
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每月数据条数
const pageNumber = ref(1) // 总页数
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dataList = ref([]) // 用于储存分页后的数据
const totalPageData = ref<any>([]) // 用于数据分组后的数据
const handleData = () => {
    if(list.value.length > 1) {
        pageNumber.value = Math.ceil(list.value.length / pageSize.value) 
    }
    //数据分组
    for(let i = 0; i < pageNumber.value; i++) {
        totalPageData.value[i] = list.value.slice(pageSize.value * i, pageSize.value * (i + 1))
    }
    //赋值展示数据
    dataList.value = totalPageData.value[currentPage.value - 1]
    emits('getTableList', dataList.value)
}
// 修改每页总数
const handleSizeChange = (val: number) => {
    pageSize.value = val
    handleData()
}
// 切换页码
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    handleData()
}

onMounted(() => {
    handleData()
})
</script>

<style lang="less" scoped>
.el-pagination {
    justify-content: flex-end;
}
</style>